<template>
    <Header></Header>

    <div class="container mx-auto max-w-screen-xl mt-5">
        <div class="grid grid-cols-4">
            <!-- 左边栏 -->
            <div class="col-span-4 px-3 md:col-span-3 sm:col-span-4">
                <div class="mb-3 p-5 bg-white dark:bg-gray-800 dark:border-gray-700">
                    <h2 class="mb-2 font-bold text-gray-900 text-2xl dark:text-white">文章分类</h2>
                    <p class="mb-6 text-gray-600 dark:text-gray-400">浏览不同分类的技术文章，找到您感兴趣的内容。</p>

                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
                        <div @click="goCatagoryArticleListPage(item.id, item.name)" v-for="(item, index) in categories" :key="index"
                            class="flex flex-col items-center p-6 border border-gray-100 rounded-lg hover:shadow-lg transition-shadow duration-300 cursor-pointer"
                            :class="[
                                index % 8 === 0 ? 'bg-blue-50' : 
                                index % 8 === 1 ? 'bg-green-50' : 
                                index % 8 === 2 ? 'bg-yellow-50' : 
                                index % 8 === 3 ? 'bg-red-50' : 
                                index % 8 === 4 ? 'bg-purple-50' : 
                                index % 8 === 5 ? 'bg-indigo-50' : 
                                index % 8 === 6 ? 'bg-pink-50' : 
                                'bg-teal-50'
                            ]">
                            <div class="w-16 h-16 mb-4 flex items-center justify-center rounded-full" 
                                :class="[
                                    index % 8 === 0 ? 'bg-blue-100' : 
                                    index % 8 === 1 ? 'bg-green-100' : 
                                    index % 8 === 2 ? 'bg-yellow-100' : 
                                    index % 8 === 3 ? 'bg-red-100' : 
                                    index % 8 === 4 ? 'bg-purple-100' : 
                                    index % 8 === 5 ? 'bg-indigo-100' : 
                                    index % 8 === 6 ? 'bg-pink-100' : 
                                    'bg-teal-100'
                                ]">
                                <svg class="w-8 h-8" 
                                    :class="[
                                        index % 8 === 0 ? 'text-blue-500' : 
                                        index % 8 === 1 ? 'text-green-500' : 
                                        index % 8 === 2 ? 'text-yellow-600' : 
                                        index % 8 === 3 ? 'text-red-500' : 
                                        index % 8 === 4 ? 'text-purple-500' : 
                                        index % 8 === 5 ? 'text-indigo-500' : 
                                        index % 8 === 6 ? 'text-pink-500' : 
                                        'text-teal-500'
                                    ]"
                                    aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 18">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="1.5"
                                        d="M2.539 17h12.476l4-9H5m-2.461 9a1 1 0 0 1-.914-1.406L5 8m-2.461 9H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5" />
                                </svg>
                            </div>
                            <h3 class="mb-2 text-lg font-bold text-center"
                                :class="[
                                    index % 8 === 0 ? 'text-blue-700' : 
                                    index % 8 === 1 ? 'text-green-700' : 
                                    index % 8 === 2 ? 'text-yellow-700' : 
                                    index % 8 === 3 ? 'text-red-700' : 
                                    index % 8 === 4 ? 'text-purple-700' : 
                                    index % 8 === 5 ? 'text-indigo-700' : 
                                    index % 8 === 6 ? 'text-pink-700' : 
                                    'text-teal-700'
                                ]">
                                {{ item.name }}
                            </h3>
                            <p class="mb-4 text-sm text-center text-gray-600">{{item.description || `相关技术文章`}}</p>
                            <span class="text-xs font-medium px-3 py-1 rounded-full"
                                :class="[
                                    index % 8 === 0 ? 'bg-blue-100 text-blue-700' : 
                                    index % 8 === 1 ? 'bg-green-100 text-green-700' : 
                                    index % 8 === 2 ? 'bg-yellow-100 text-yellow-700' : 
                                    index % 8 === 3 ? 'bg-red-100 text-red-700' : 
                                    index % 8 === 4 ? 'bg-purple-100 text-purple-700' : 
                                    index % 8 === 5 ? 'bg-indigo-100 text-indigo-700' : 
                                    index % 8 === 6 ? 'bg-pink-100 text-pink-700' : 
                                    'bg-teal-100 text-teal-700'
                                ]">
                                {{item.articleCount || 0}} 篇文章
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边栏 -->
            <div class="col-span-4 px-3 md:col-span-1 sm:col-span-4">
                <div class="sticky top-21 space-y-4">
                    <UserInfoCard></UserInfoCard>
                    
                    <!-- 标签云 -->
                    <div class="mb-3 w-full font-medium p-5 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
                        <h4 class="mb-3 font-bold text-gray-900 dark:text-white">热门标签</h4>
                        <div class="flex flex-wrap gap-2">
                            <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in tags" :key="index"
                                class="px-3 py-1.5 bg-green-50 text-green-600 text-xs font-medium rounded-full hover:bg-green-100 hover:text-green-700 transition-colors duration-200 dark:hover:bg-green-800 dark:hover:text-green-300 dark:bg-green-900 dark:text-green-300">
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'
import UserInfoCard from '@/components/UserInfoCard.vue'
import { useRouter } from 'vue-router'
import { getCategories } from '@/api/frontend/category'
import { getTags } from '@/api/frontend/tag'
import { ref } from 'vue'

const router = useRouter()

const goCatagoryArticleListPage = (id, name) => {
    router.push({ path: '/category/list', query: { id: id, name: name } })
}

const goTagArticleListPage = (id, name) => {
    router.push({ path: '/tag/list', query: { id: id, name: name } })
}

const categories = ref([])
getCategories().then((e) => {
    if (e.success) {
        categories.value = e.data
        console.log('获取到分类数据:', categories.value)
    }
})

const tags = ref([])
getTags().then((e) => {
    if (e.success) {
        tags.value = e.data
        console.log('获取到标签数据:', tags.value)
    }
})
</script>